<template>
    <div class="valuation">
        <PageBanner
            title="房产估价"
            :breadcrumbs="[
                { title: '房产估价' }
            ]"
        />
        
        <div class="container">
            <div class="content-wrapper">
                <div class="valuation-form-wrapper">
                    <h2 class="form-title">免费房产估价</h2>
                    <p class="form-desc">填写以下信息，我们的专业经纪人会尽快与您联系，为您提供免费的房产估价服务。</p>
                    
                    <el-form
                        ref="formRef"
                        :model="formData"
                        :rules="rules"
                        label-width="120px"
                        class="valuation-form"
                    >
                        <el-form-item label="房屋地址" prop="address">
                            <el-input v-model="formData.address" placeholder="请输入房屋详细地址" />
                        </el-form-item>
                        
                        <el-form-item label="建筑面积" prop="area">
                            <el-input-number v-model="formData.area" :min="1" />
                            <span class="unit">平方米</span>
                        </el-form-item>
                        
                        <el-form-item label="房屋类型" prop="houseType">
                            <el-select v-model="formData.houseType" placeholder="请选择房屋类型">
                                <el-option label="住宅" :value="1" />
                                <el-option label="商铺" :value="2" />
                                <el-option label="写字楼" :value="3" />
                            </el-select>
                        </el-form-item>
                        
                        <el-form-item label="装修情况" prop="decoration">
                            <el-select v-model="formData.decoration" placeholder="请选择装修情况">
                                <el-option label="毛坯" :value="1" />
                                <el-option label="简装" :value="2" />
                                <el-option label="精装" :value="3" />
                            </el-select>
                        </el-form-item>
                        
                        <el-form-item label="联系人" prop="contactName">
                            <el-input v-model="formData.contactName" placeholder="请输入您的姓名" />
                        </el-form-item>
                        
                        <el-form-item label="联系电话" prop="contactPhone">
                            <el-input v-model="formData.contactPhone" placeholder="请输入您的联系电话" />
                        </el-form-item>
                        
                        <el-form-item label="备注信息" prop="remark">
                            <el-input
                                v-model="formData.remark"
                                type="textarea"
                                :rows="4"
                                placeholder="请输入其他需要说明的信息"
                            />
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="primary" @click="submitForm">提交申请</el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import PageBanner from '@/views/common/PageBanner.vue'

const formRef = ref(null)
const formData = reactive({
    address: '',
    area: 0,
    houseType: null,
    decoration: null,
    contactName: '',
    contactPhone: '',
    remark: ''
})

const rules = {
    address: [
        { required: true, message: '请输入房屋地址', trigger: 'blur' }
    ],
    area: [
        { required: true, message: '请输入建筑面积', trigger: 'blur' }
    ],
    houseType: [
        { required: true, message: '请选择房屋类型', trigger: 'change' }
    ],
    decoration: [
        { required: true, message: '请选择装修情况', trigger: 'change' }
    ],
    contactName: [
        { required: true, message: '请输入联系人姓名', trigger: 'blur' }
    ],
    contactPhone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ]
}

const submitForm = async () => {
    if (!formRef.value) return
    
    try {
        await formRef.value.validate()
        // TODO: 调用API提交数据
        ElMessage.success('提交成功，经纪人会尽快与您联系')
    } catch (error) {
        console.error('表单验证失败:', error)
        ElMessage.error('请检查表单填写是否正确')
    }
}

const resetForm = () => {
    if (!formRef.value) return
    formRef.value.resetFields()
}
</script>

<style lang="scss" scoped>
.valuation {
    .container {
        padding: 40px 60px;
        
        .content-wrapper {
            max-width: 1320px;
            margin: 0 auto;
        }
    }

    .valuation-form-wrapper {
        max-width: 800px;
        margin: 0 auto;
        background: #fff;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        .form-title {
            text-align: center;
            font-size: 28px;
            color: #2F3B59;
            margin-bottom: 16px;
        }

        .form-desc {
            text-align: center;
            color: #666;
            margin-bottom: 40px;
        }

        .unit {
            margin-left: 8px;
            color: #666;
        }

        .el-form-item:last-child {
            margin-bottom: 0;
            text-align: center;

            .el-button {
                min-width: 120px;
                margin: 0 10px;
            }
        }
    }
}
</style> 